<template>
  <main-content back title="流程模板O">
    <template #search-bar>
      <search-bar>
        <template #normal>
          <el-form-item label="流程名称">
            <el-input type="text" clearable v-model="form.name" placeholder="输入搜索关键词" @input="handleNameChange">
            </el-input>
          </el-form-item>
          <el-form-item label="选择模型">
            <el-select v-model="form.isSet" placeholder="选择模型" @change="handleSetValueChange" clearable>
              <el-option label="全部" :value="-1" />
              <el-option label="已设置" :value="1" />
              <el-option label="未设置" :value="0" />
            </el-select>
          </el-form-item>
        </template>
      </search-bar>
    </template>

    <div class="model-list">
      <model-card v-for="(item, index) in modelList" :card-data="item" :index="index" :key="item.id" @apply="handleApply"></model-card>
    </div>

    <div class="pagination-wrapper">
      <el-pagination v-model:currentPage="pageInfo.currentPage" v-model:page-size="pageInfo.showCount"
        :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </main-content>
</template>

<script lang="ts" setup>
/**
 * TODO 不使用 验证后删除此文件
 */
import { IFlowModelCard, IFlowModelData} from "@/api/modules/flowModel";
import { getFlowModelList } from "@/api/flowModel";

import { debounce } from '@/utils'

import ModelCard from "./component/ModelCard.vue";

const router = useRouter()

const form = reactive<IFlowModelData>({
  name: '',
  isSet: -1,
})

const pageInfo = reactive({
  currentPage: 1,
  showCount: 10,
  total: 0,
})

const modelList = ref<IFlowModelCard[]>([])

const getList = async () => {
  const _form = {...form}
  if (_form.isSet === -1) {
    _form.isSet = undefined
  }

  const data = {
    ..._form,
    ...pageInfo
  }

  const rs = await getFlowModelList(data)
  if (rs.code === 200) {
    modelList.value = rs.payload ?? []

    if (rs.page) {
      pageInfo.total = rs.page.totalResult
    }
  }
}


const handleSizeChange = (val: number) => {
  pageInfo.showCount = val
  getList()
}

const handleCurrentChange = (val: number) => {
  pageInfo.currentPage = val
  getList()
}

const handleNameChange = debounce(() => {
  handleCurrentChange(1)
}, 700, false)

const handleSetValueChange = () => {
  handleCurrentChange(1)
}

const handleApply = (cardData: IFlowModelCard) => {
  router.push({
    path: "/modelWorktable",
    query: {
      modelId: cardData.id,
      from: 'merchantTemplate'
    }
  })
}

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.model-list {
  overflow: hidden;
  padding: 10px 5px;
}

.pagination-wrapper {
  display: flex;
  //justify-content: flex-end;
}
</style>
